@hig/flyout

Flyout

A flyout is a lightweight popup container, typically styled as a small box with a nub (pointer). Flyouts provide a container for navigation, actions, and menu options.

Read more about when and how to use the Flyout component on the website.

Getting started

Install the package

yarn add @hig/flyout

Import the component and CSS

import Flyout, { anchorPoints } from "@hig/flyout";
import "@hig/flyout/build/index.css";

Basic usage

<Flyout
  anchorPoint={anchorPoints.RIGHT_TOP}
  content={
    <div>
      <h3>Important flyout information</h3>
      <p>Any content can go in here.</p>
    </div>
  }
>
  <Button title="Open flyout" />
</Flyout>

Render prop children

<Flyout
  content={
    <div>
      <h3>Important flyout information</h3>
      <p>Any content can go in here.</p>
    </div>
  }
>
  ({ handleClick }) => (
    <CustomWrapper>
      <CustomButton onClick={handleClick} />
    </CustomWrapper>
  )
</Flyout>